import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {Card, List, message} from 'antd';
import {
  listInterfaceInfoByPageUsingGet,
  offlineInterfaceInfoUsingPost
} from "@/services/myapi-backend/interfaceInfoController";

/**
 * 主页
 * @constructor
 */
const data = [
  {
    title: 'Title 1',
  },
  {
    title: 'Title 2',
  },
  {
    title: 'Title 3',
  },
  {
    title: 'Title 4',
  },
  {
    title: 'Title 4',
  },
  {
    title: 'Title 4',
  },
  {
    title: 'Title 4',
  },
];

const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>(0);

  const loadData = async (current = 1, pageSize = 10) => {
    setLoading(true);
    try {
      const res = await listInterfaceInfoByPageUsingGet({
        current, pageSize
      });
      setList(res?.data?.records ?? []);
      setTotal(res?.data?.total ?? 0)
    } catch (error) {
      message.error('请求失败，' + error.message);
    }
    setLoading(false);
  }

  // 首次加载组件的时候可以用useEffect向后端发送请求
  useEffect(() => {
    loadData();
  }, []);

  return (
    <PageContainer title={'在线接口开放平台'}>
      <List
        className={'my-list'}
        loading={loading}
        grid={{ gutter: 16, column: 5 }}
        dataSource={list}
        renderItem={(item) => (
          <List.Item>
            {/* eslint-disable-next-line react/jsx-key */}
            <a href={`/interface_info/${item.id}`} key={item.id}>
              <Card
                style={{ width: 300 }}
                hoverable
                cover={
                  <img
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                  />
                }
              >
                <List.Item.Meta
                  title={<a key={item.id} href={`/interface_info/${item.id}`}>{item.name}</a>}
                  description={item.description}
                />
              </Card>
            </a>

          </List.Item>
        )}
        pagination={{
          pageSize: 10,
          total: total,
          onChange(page, pageSize) {
            loadData(page, pageSize);
          },
        }}
      />
    </PageContainer>
  );
};

export default Index;
